import { View } from "@tarojs/components";
import Taro, { Component } from "@tarojs/taro";
import { classNames, isNumber } from "../utils";
import { BG_COLOR_LIST, TEXT_COLOR_LIST } from "../utils/model";
import { IProps } from "../../../@types/tabBar";

interface IState {
  activeIndex: number;
}

export default class ClTabBar extends Component<IProps, IState> {
  static options = {
    addGlobalClass: true
  };
  static defaultProps: IProps = {
    bgColor: "white",
    activeColor: "blue",
    active: 0,
    tabs: []
  };
  state: IState = {
    activeIndex: 0
  };
  click(index: number) {
    this.setState({
      activeIndex: index
    });
    this.props.onClick && this.props.onClick(index);
  }
  componentDidMount() {
    this.setState({
      activeIndex: this.props.active || 0
    });
  }
  render() {
    const colorClassName = this.props.bgColor
      ? BG_COLOR_LIST[this.props.bgColor]
      : "bg-white";
    const activeColorClassName = this.props.activeColor
      ? TEXT_COLOR_LIST[this.props.activeColor]
      : "text-blue";
    const barComponent = this.props.tabs.map((item, index) => (
      <View
        onClick={this.click.bind(this, index)}
        key={item.icon}
        className={`action ${item.action ? "add-action" : ""} ${
          this.state.activeIndex === index ? activeColorClassName : ""
        }`}
      >
        <View
          className={`${
            item.img
              ? "cuIcon-cu-image"
              : item.icon
              ? "cuIcon-" + item.icon
              : ""
          }`}
        >
          {item.badge !== false ? (
            <View className="cu-tag badge">
              {isNumber(item.badge) ? item.badge : ""}
            </View>
          ) : (
            ""
          )}
        </View>
        <View>{item.title}</View>
      </View>
    ));
    return (
      <View
        className={classNames(
          `cu-bar tabbar ${colorClassName}`,
          this.props.className
        )}
        style={Object.assign(
          this.props.fix
            ? { position: "fixed", width: "100vw", bottom: "0", zIndex: 10 }
            : {},
          this.props.style
        )}
      >
        {barComponent}
      </View>
    );
  }
}
